import { Table, Input, Button } from 'antd';
import { useContext, useState, useEffect, useRef } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { DthesaurusContent } from './dthesaurus-content'
import { DataType, paginationType } from './type'
import CreatedomainModel from './domainModel'
const domainThesaurus = () => {
    const {
        columns,
        data,
        domainOperation,
        createdomainModeloPen,
        setCreatedomainModeloPen,
        initdomainData,
        pagination,
        setPagination,
        filterValue,
        setFilterValue,
        setDomainRow,
        tableHeight,
        setTableHeight,
        getTableHeight,
    } = useContext(DthesaurusContent)
    useEffect(() => {
        setTableHeight(getTableHeight());
        window.addEventListener('resize', () => setTableHeight(getTableHeight()));
        return () => window.removeEventListener('resize', () => { });
    }, []);
    const pagginationRef = useRef(pagination)
    useEffect(() => {
        pagginationRef.current = pagination
    }, [pagination])
    const handleItemClick = (key: string) => {
        setCreatedomainModeloPen(true)
    }
    useEffect(() => {
        initdomainData()
    }, [initdomainData, filterValue])
    const onSearch = async (e: any) => {
        setPagination({
            current: 1,
            pageSize: 10,
            total: 0
        })
        setFilterValue(e.target.value)
    }
    return <div className='h-screen w-full p-4 md:p-6 overflow-y-auto'>
        <div className='flex justify-between items-center mb-3'><Input className='w-[200px]' placeholder={'请输入词库名称搜索'} value={filterValue}
            onPressEnter={onSearch} onChange={onSearch}></Input><Button
                onClick={() => {
                    handleItemClick('add');
                    setDomainRow({})
                }}
                className='border-none text-white bg-button-gradient flex items-center'
                icon={<PlusOutlined />}
            >
                创建词库
            </Button></div>
        <Table<DataType> columns={columns} dataSource={data}
            scroll={{ y: tableHeight }}
            pagination={{
                ...pagination,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50'],
                showTotal: total => `共 ${total} 条`,
                onChange: (page, pageSize) => {
                    setPagination((prevPagination: paginationType) => ({
                        ...prevPagination,
                        current: page,
                        pageSize,
                        total: pagination.total
                    }))
                    initdomainData(page, pageSize)
                }
            }} />
        {createdomainModeloPen && <CreatedomainModel open={createdomainModeloPen} onCancel={() => {
            setCreatedomainModeloPen(false)
        }} refresh={() => {
            setPagination((prevPagination: paginationType) => ({
                ...prevPagination,
                current: 1,
            }))
            initdomainData(1, pagination.pageSize)
        }} type={domainOperation}></CreatedomainModel>}
    </div>
};

export default domainThesaurus;